@extends('home.layout')
@section('content')
<style type="text/css">
    .pmar
    {
        height:20px;
        color:#DC0505;
    }
    .form-control
    {
        height:50px;
    }
    #sexul > li
    {
        float: left;
        margin-right:8px;
    }
    #sina
    {
        display: inline-block;
        width: 52px;
        height: 50px;
        background-image: url('/home/img/three.png');
        background-position: -164px 0;
        margin-right:10px;
    }
    #qq
    {
        display: inline-block;
        width: 51px;
        height: 50px;
        background-image: url('/home/img/three.png');
        background-position: 0px 0;
    }
    #sendEmail
    {
        position: absolute;
        top:180px;
        left:235px;
        z-index: 10000;
    }
</style>
<div style="background: #DEDEE0">
    <div class="container">
        <div class="row" style="margin:80px 0; background: #ffffff">
            <div class="col-md-4 col-md-offset-1">
                <form action="{{ url('/home/reg/doreg') }}" method="post" role="form">
                {{ csrf_field() }}
                    <h2 class="text-center">
                        <strong>新会员注册</strong>
                    </h2>
                    <p class="pmar"></p>
                    <div>
                        <input type="email" name="email" class="form-control" placeholder="常用邮箱" id="regEmail">
                    </div>
                    <p class="pmar" id="pmar1"></p>
                    <div>
                        <input type="text" class="form-control" placeholder="邮箱验证码" id="regcode">
                        <a class="btn btn-default" href="javascript::" role="button" id="sendEmail">发送邮件验证码</a>
                    </div>
                    <p class="pmar" id="pmar2"></p>
                    <div>
                        <input type="password" name="password" class="form-control" placeholder="密码(6—20位数字与字母、下划线组合)" id="regPwd">
                    </div>
                    <p class="pmar" id="pmar3"></p>
                    <div>
                        <input type="password" name="towpassword" class="form-control" placeholder="确认密码" id="regTpwd">
                    </div>
                    <p class="pmar" id="pmar4"></p>
                    <div style="color:#A5A5A5;">
                        <ul id="sexul">
                            <li>
                                性别
                            </li>
                            <li>
                                <input type="radio" name="sex" id="optionsRadios1" value="1" checked>
                                男
                                <li class="fa fa-mars" style="font-size:18px"></li>
                            </li>
                            <li>
                                <input type="radio" name="sex" id="optionsRadios2" value="2">
                                女
                                <li class="fa fa-venus" style="font-size:17px"></li>
                            </li>
                        </ul>
                        <div style="clear:left;"></div>
                    </div>
                    <label class="checkbox">
                        <input type="checkbox" name="clause">
                        <a href="javascript::">已同意《Mtime时光网服务条款》</a>
                    </label>
                    <p class="pmar"></p>
                    <div>
                        <button type="submit" class="btn btn-primary btn-lg btn-block" name="reg" disabled="disabled">注册</button>
                    </div>
                    <p class="pmar" id="pmar5"></p>
                </form>
            </div>
            <div class="col-md-1 col-md-offset-1">
                <div style="width:1px; height:580px; background-image: url({{ url('/home/img/reg24.png') }});"></div>
            </div>
            <div class="col-md-4">
                <form action="{{ url('/home/login/dologin') }}" method="post" role="form">
                {{ csrf_field() }}
                    <h2 class="text-center">
                        <strong>会员登录</strong>
                    </h2>
                    <p class="pmar"></p>
                    <div>
                        <input type="email" name="email" class="form-control" placeholder="输入电子邮箱" id="loginEmail">
                    </div>
                    <p class="pmar" id="pmar6"></p>
                    <div>
                        <input type="password" name="password" class="form-control" placeholder="输入密码" id="loginPwd">
                    </div>
                    <p class="pmar" id="pmar7"></p>
                    <div>
                        <div class="row">
                            <div class="col-md-8">
                                <input type="text" name="code" class="form-control" placeholder="验证码" style="width: 240px;">
                            </div>
                            <div class="col-md-4">
                                <a onclick="javascript:re_captcha();" ><img src="{{ URL('kit/captcha/1') }}"  alt="验证码" title="刷新图片" width="110" height="40" id="c2c98f0de5a04167a9e427d883690ff6" border="0"></a>
                            </div>
                        </div>
                    </div>
                    <p class="pmar"></p>
                    <label class="checkbox">
                        <input type="checkbox" name="">
                        <a href="javascript::">记住密码</a>
                        <a href="{{ url('/home/user/forget') }}" style="float: right;">忘记密码</a>
                    </label>
                    <p class="pmar"></p>
                    <div>
                        <button type="submit" class="btn btn-primary btn-lg btn-block">登录</button>
                    </div>
                    <p class="pmar text-center"><strong>使用第三方登录</strong></p>
                    <div style="width:100%; text-align:center;">
                        <a href="javascript::" id="sina"></a>
                        <a href="javascript::" id="qq"></a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    //初始邮箱验证码
    var code = 1;
    //刷新验证码
    function re_captcha() {
    $url = "{{ URL('kit/captcha') }}";
        $url = $url + "/" + Math.random();
        document.getElementById('c2c98f0de5a04167a9e427d883690ff6').src=$url;
    }
    //正则匹配邮箱输入框
    $('input[id="regEmail"]').on('blur', function(){
        //获取输入的值
        var v = this.value;
        // console.log(v);
        //声明正则
        var reg = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
        //验证
        var res = reg.test(v);
        //判断
        if(res)
        {
            $.ajax({
            url:'/home/reg/testemail',
            type:'GET',
            dataType:'json',
            data:'email=' + v,
            success:function(data)
            {
                if(data == 1)
                {
                    $('input[id="regEmail"]').css({ border: "1px solid #f00" });
                    $('#pmar1').html('邮箱已经注册');
                    return '';
                }else
                {
                    $('input[id="regEmail"]').css({ border: '1px solid #0f0'});
                }
            },
                error:function()
                {
                    alert('数据异常');
                }
            });
            $('#pmar1').html('');
        }else {
            this.style.border = '1px solid #f00';
            $('#pmar1').html('请输入正确邮箱');
        }
    })
    //发送验证邮件
    $('#sendEmail').on('click',function(){
        var v = $('#regEmail').attr('value');
        if(v == '')
        {
            alert('请输入邮箱')
            return ;
        }
        $.ajax({
            url:'/home/reg/sendemail',
            type:'GET',
            dataType:'json',
            data:'email=' + v,
            success:function(data)
            {
                code = data;
            },
            error:function()
                {
                    alert('数据异常');
                }
        });
        var i = 120;
        $('#sendEmail').attr('disabled','disabled');
        s = setInterval(function(){
                i--;
                $('#sendEmail').html(i + '邮件已发送');
                // 判断界限
                if (i <= 0) {
                    clearInterval(s);
                    $('#sendEmail').attr('disabled',false);
                    $('#sendEmail').html('重新发送');
                }
            }, 1000)
    })
    //验证邮箱验证码
    $('#regcode').on('blur', function(){
        var codevalue = this.value;
        if(codevalue == code)
        {
            this.style.border = '1px solid #0f0';
            $('#pmar2').html('');
        }else
        {
            this.style.border = '1px solid #f00';
            $('#pmar2').html('邮箱验证码错误');
        }
    })
    
    //正则匹配密码输入框
    $('input[id="regPwd"]').on('blur', function(){
        //获取输入的值
        var v = this.value;
        // console.log(v);
        //声明正则
        var reg = /^[a-z0-9_-]{6,20}$/;
        //验证
        var res = reg.test(v);
        //判断
        if(res)
        {
            $('#pmar3').html('');
            this.style.border = '1px solid #0f0';
        }else {
            this.style.border = '1px solid #f00';
            $('#pmar3').html('密码由6-20位数字，字母，下划线组合');
        }
    })
    //正则匹配重复密码
    $('input[id="regTpwd"]').on('blur', function(){
        //获取输入的值
        var v = this.value;
        var p = $('input[id="regPwd"]').attr('value');
        //判断
        if(v == p)
        {
            $('#pmar4').html('');
            this.style.border = '1px solid #0f0';
        }else {
            this.style.border = '1px solid #f00';
            $('#pmar4').html('两次密码不一致');
        }
    })
    //验证是否同意服务条款
    $('input[name="clause"]').on('click', function(){
        if($("input[name='clause']").attr("checked"))
        {
            $('button[name="reg"]').attr('disabled',false);
            $('#pmar5').html('');
        }else
        {
            $('#pmar5').html('请同意条款');
            $('button[name="reg"]').attr('disabled','disabled');
        }
    })
    //登录的邮箱验证
    $('input[id="loginEmail"]').on('blur', function(){
        //获取输入的值
        var v = this.value;
        // console.log(v);
        //声明正则
        var reg = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
        //验证
        var res = reg.test(v);
        //判断
        if(res)
        {
            $('#pmar6').html('');
            this.style.border = '1px solid #0f0';
        }else {
            this.style.border = '1px solid #f00';
            $('#pmar6').html('请输入正确邮箱');
        }
    })
    //登录的密码验证
    $('input[id="loginPwd"]').on('blur', function(){
        //获取输入的值
        var v = this.value;
        // console.log(v);
        //声明正则
        var reg = /^[a-z0-9_-]{6,20}$/;
        //验证
        var res = reg.test(v);
        //判断
        if(res)
        {
            $('#pmar7').html('');
            this.style.border = '1px solid #0f0';
        }else {
            this.style.border = '1px solid #f00';
            $('#pmar7').html('请输入密码');
        }
    })
</script>
@endsection